import React, { FC, useEffect } from 'react'
import { Typography, Space, Checkbox, message } from 'antd'
import { UserAddOutlined } from '@ant-design/icons'
const { Title } = Typography
import { Link, useNavigate } from 'react-router-dom'
import { REGISTER_PATHNAME } from '../../router/index'
import { MANAGE_INDEX_PATHNAME } from '../../router/index'
import { loginService } from '../../service/users'
import style from './Login.module.scss'
import { Button, Form, Input } from 'antd'
import { useRequest } from 'ahooks'
import { setToken } from '../../utils/user-token'
const USERNAME_KEY = 'USERNAME'
const PASSWORD_KEY = 'PASSWORD'
const rememberHandler = (username: string, password: string) => {
  localStorage.setItem(USERNAME_KEY, username)
  localStorage.setItem(PASSWORD_KEY, password)
}
const deleteUserStorage = () => {
  localStorage.removeItem(USERNAME_KEY)
  localStorage.removeItem(PASSWORD_KEY)
}
const getUserStorage = () => {
  return {
    username: localStorage.getItem(USERNAME_KEY),
    password: localStorage.getItem(PASSWORD_KEY),
  }
}

const Registry: FC = () => {
  const nav = useNavigate()
  const { loading, run } = useRequest(
    async values => {
      const { username, password } = values
      const data = await loginService(username, password)
      return data
    },
    {
      manual: true,
      onSuccess: (result: any) => {
        message.success('登录成功', result.data)
        console.log('token', result.token)
        setToken(result.token)
        nav(MANAGE_INDEX_PATHNAME)
      },
    }
  )
  const [form] = Form.useForm() //第三方hook
  type FieldType = {
    username?: string
    password?: string
    remember?: string
  }
  useEffect(() => {
    const { username, password } = getUserStorage()
    form.setFieldsValue({
      username,
      password,
    })
  }, [])
  const onFinish = (value: any) => {
    console.log('hello world', value)
    if (value.remember) {
      rememberHandler(value.username, value.password)
    } else {
      deleteUserStorage()
    }
    run(value)
  }
  const onFinishFailed = () => {}
  return (
    <div className={style.container}>
      <Space>
        <Title level={2}>
          <UserAddOutlined></UserAddOutlined>
        </Title>
        <Title level={2}>用户登录</Title>
      </Space>
      <div>
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
          form={form}
        >
          <Form.Item<FieldType>
            label="用户名"
            name="username"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item<FieldType>
            label="密码"
            name="password"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item<FieldType>
            name="remember"
            valuePropName="checked"
            wrapperCol={{ offset: 8, span: 16 }}
          >
            <Checkbox>记住我</Checkbox>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Space>
              <Button type="primary" htmlType="submit" loading={loading}>
                登录
              </Button>
              <Link to={REGISTER_PATHNAME}>去注册</Link>
            </Space>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}
export default Registry
